<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>订单详情</title>
		<style type="text/css">
			#big{
				width: 396px;
				height: 767px;
				background-color: white;
				margin: auto;
			}
			p{
				margin: 0;
			}
			a{
				text-decoration: none;
			}
			ul{
				padding: 0;
				margin: 0;
			}
			li{
				list-style: none;
			}
		</style>
	</head>
	<body>
		<div style="width: 100%; height: 100%; background: rgb(235, 237, 238);">
			<div id="big">
				<div style="height: 40px;width: 380px;">
					<div style="color:black; font-family: Helvetica; width: 30px; height: 40px; text-align: center; line-height: 40px;
					display: inline-block; margin-left: 24px;">
						9:14
					</div><!--时间-->
					<div style=" float: right;">
						<img src="image/手机右上角.png">
					</div>
				<div style="height: 50px;width: 380px;background-color: #FFFFFF;display: flex;justify-content: space-between;align-items: center;">
					<div>
						<a href="MyOrder.html">
							<div style="margin-left: 20px;">《</div>
						</a>
					</div>
					<div style="width: 240px;">
						订单详情
						
					</div>
				</div>
				<div style="width: 360px;margin: 15px 10px;background-color: #FFFFFF;text-align: center;border-radius: 5px;padding: 25px 0;">
					<p>订单已取消</p>
					<p style="color: rgb(170, 170, 170);font-size: 13px;margin-top: 5px;">感谢您对喜茶的支持，欢迎再次光临</p>
					<div style="text-align: center;padding-top: 17px;">
						<a href="" style="width: 103px;background-color: rgb(255 240 243);color: #DBA817;border: 1px solid #DBA817;padding: 5px 10px;display: inline-block;">
							再来一单
						</a>
					</div>
				</div>
				<div style="width: 360px;margin: 0 10px;background-color: #FFFFFF;border-radius: 5px;padding: 25px 0 15px 0;">
					<div style="display: flex;justify-content: space-between;padding: 0 20px;">
						<div style="width: 200px;text-align: left;">
							<p>美年广场GO店</p>
							<p style="color: #C3C3C3;font-size: 12px;margin-top: 5px;">高新区天府大道中段1388号“红糖”14栋1层3（L105号）号商铺</p>
						</div>
						<div >
							<img src="image/dianhua.png">
						</div>
					</div>
					<p style="height: 0.5px;margin-left: 20px;width: 320px;margin-top: 5px;background-color: #ececec;"></p>
					<div style="display: flex;justify-content: space-between;height: 90px;align-items: center;padding: 0 20px;">
						<div style="width: 200px;">
							<img src="image/icon/dingdanimg3.png" style="width: 60px;height: 60px;float: left;">
							<p>芒芒甘露椰椰冻</p>
						</div>
						<div style="text-align: center;">
							<p>￥29</p>
							<span style="color: #afafaf;font-size: 12px;">x1</span>
						</div>
					</div>
					<div style="display: flex;justify-content: space-between;height: 90px;align-items: center;padding: 0 20px;">
						<div style="width: 200px;">
							<img src="image/icon/dingdanimg2.png" style="width: 60px;height: 60px;float: left;">
							<p>NFC芒芒汁</p>
						</div>
						<div style="text-align: center;">
							<p>￥19</p>
							<span style="color: #afafaf;font-size: 12px;">x1</span>
						</div>
					</div>
					<p style="height: 0.5px;margin-left: 20px;width: 320px;margin-top: 5px;background-color: #ececec;"></p>
					<div style="display: flex;justify-content: space-between;padding: 10px 20px;">
						<p style="color: #C3C3C3;">商品总价</p>
						<p style="color: #333333;font-size: 12px;">￥48</p>
					</div>
					<p style="height: 0.5px;margin-left: 20px;width: 320px;margin-top: 5px;background-color: #ececec;"></p>
					<div style="text-align: right;margin-top: 10px;padding-right: 20px;">
						<span style="color: #C3C3C3;font-size: 14px;margin-right: 10px;">共2件商品，合计</span><span style="font-size: 12px;">￥48</span>
					</div>
				</div>
				<div style="width: 360px;margin: 10px 10px;background-color: #FFFFFF;border-radius: 5px;height: 155px;">
					<div style="padding: 15px 20px;font-size: 16px;">
						订单信息
					</div>
					<p style="height: 0.5px;margin-left: 20px;width: 320px;margin-top: 5px;background-color: #ececec;"></p>
					<table style="font-size: 12px;margin-left: 20px;line-height: 2;">
						<tr>
							<td style="color: #C3C3C3;">下单时间：</td>
							<td>11/02 19:19</td>
						</tr>
						<tr>
							<td style="color: #C3C3C3;">订单编号：</td>
							<td>019328129048472948023808319<span style="margin-left: 40px;color: #DBA871;">复制</span></td>
						</tr>
						<tr>
							<td style="color: #C3C3C3;">备注信息：</td>
							<td>不打包</td>
						</tr>
					</table>
				</div>
				<div style="height:30px;text-align: center;line-height: 3;font-size: 12px;color: #C3C3C3;">
					如需退款，请致电门店
				</div>
			</div>
		</div>
	</body>
</html>